<template xmlns="">
    <div class="content-box">
        <draggable v-model="chat.recentSingleList" @start="onStart" @end="onEnd" :animation="300" :handle="'.mover'">
            <transition-group>
                <div class="user-item" v-for="item in chat.recentSingleList" :key="item.sort"
                     @click="openChat(item)"
                     :placeholder="item.unread">
                    <img v-if="item.avatar" class="user-avatar-square mover" :src="item.avatar"
                         alt="author"/>
                    <img v-else class="user-avatar-square mover" src="@/assets/images/user/default-author.png"
                         alt="author"/>
                    <div class="user-info">
                        <n-ellipsis style="max-width: 100%">
                            <span class="user-name">{{ item.friendRemark }}</span>
                            <template #tooltip>
                                <div style="text-align: center">
                                    {{ item.friendRemark }}
                                </div>
                            </template>
                        </n-ellipsis>
                        <span class="end-msg">
                            <n-ellipsis style="max-width: 90%">
                                {{ item.lastMsg }}
                                <template #tooltip>
                                    <div style="text-align: center">
                                     自己点开看
                                    </div>
                                </template>
                            </n-ellipsis>
                        </span>
                    </div>
                    <span class="user-time">{{ formatDateTimeNotS(item.time) }}</span>
                </div>
            </transition-group>
        </draggable>
    </div>
</template>
<script setup lang="ts">
import useStore from "@/store";
import {formatDateTimeNotS} from "@/utils/date";
import {readMsg} from "@/api/msg";
import {SingleChatList} from "@/api/msg/types";
import {ConversationData} from "@/model/chat";
import useWebSocket from "@/utils/websocket";

const {user, chat} = useStore()

const drag = ref(false)
const webSocket = ref();

const onStart = () => {
    drag.value = true;
}

const onEnd = () => {
    drag.value = false;
}

/**
 * 打开聊天框
 */
const openChat = (sl: SingleChatList) => {
    // 读取所有消息
    readMsg(sl.roomId);
    // 设置历史消息（是分页数据，设置最后一页的数据）
    let fId = sl.roomId.split("_")[1];
    chat.setCurrentConversation(sl.roomId, {
        type: 1,
        name: sl.friendRemark,
        img: sl.avatar,
        uniqueMark: Number(fId),
    } as ConversationData);
    // 开启聊天框
    chat.chatType = 1;
}

/**
 * socket消息处理函数
 */
function handleMessage(content: any) {
    // 直接使最近的单聊列表全部更新
    chat.setRecentSingleList();
}

onMounted(() => {
    if (user.id) {
        chat.setRecentSingleList();
        webSocket.value = useWebSocket(handleMessage);
    }
})
</script>

<style scoped lang="scss">

.content-box {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;

  .user-item {
    position: relative;
    width: 100%;
    padding: 0.1rem;
    border-radius: 0.1rem;
    box-shadow: 0 0 0.1rem var(--box-shadow);
    margin-top: 0.2rem;
    color: var(--main-2-h8);

    &:not([placeholder="0"])::after {
      content: attr(placeholder);
      background: #f10909;
      position: absolute;
      width: 0.36rem;
      height: 0.36rem;
      border-radius: 50%;
      left: 0.75rem;
      top: 0.1rem;
      color: var(--comment-white-color);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &:hover {
      box-shadow: inset 0 0 0.1rem var(--box-shadow-c);
    }

    .user-avatar-square {
      position: relative;
      top: 0.08rem;
      left: 0.08rem;
    }

    .user-info {
      width: calc(100% - 2.5rem);
      height: 0.8rem;
      position: absolute;
      top: 0.1rem;
      left: 1.2rem;

      .user-name {
        font-weight: bold;
        font-size: 0.3rem;
        color: var(--main-1);
      }

      .end-msg {
        width: 100%;
        position: absolute;
        top: 0.45rem;
        left: 0;
      }
    }

    .user-time {
      width: 1.5rem;
      position: absolute;
      top: 0;
      right: 0;
      font-size: 0.2rem;
    }
  }
}
</style>
